<% content_for :head do %>
  <%= stylesheet_link_tag    :ui %>
  <%= javascript_include_tag :ui %>
  <%= javascript_include_tag :autocomplete %>
  <%= javascript_include_tag :sortable %>

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
      function init_properties_sortable() {
        $('ol#properties').sortable({
          items: "li.property",
          update: function(event, ui) {
            $('input.property_position').each(function(index) {
              $(this).val(index + 1);
            });
          }
        });
      }

      init_properties_sortable();

      function send_nested_sets_new_structure(item_id, parent_id, prev_id, next_id){
        jQuery.ajax({
          type: 'POST',
          url: '<%= restructure_admin_product_product_properties_path %>',
          data: {parent_id: parent_id,node_id: item_id, prev_id: prev_id, next_id: next_id, authenticity_token: '<%= form_authenticity_token %>'},
          dataType: 'script',
          beforeSend: function(xhr){},
          error: function(xhr, status, error){ alert(error); }
        });//jQuery.ajax
      }

      $('ol.property_attributes').nestedSortable({
        items: "li.property_attribute",
        disableNesting: 'no-nest',
        maxLevels: 4,
        opacity: 0.6,
        revert: 250,
        tabSize: 27,

        update: function(event, ui) {
          item_id   = ui.item.children("div").children(".property_attribute_presentation").attr("node_id");
          parent_id = ui.item.parent().parent("li.property_attribute").children("div").children(".property_attribute_presentation").attr('node_id');
          prev_id   = ui.item.prev("li.property_attribute").children("div").children(".property_attribute_presentation").attr('node_id');
          next_id   = ui.item.next("li.property_attribute").children("div").children(".property_attribute_presentation").attr('node_id');

          send_nested_sets_new_structure(item_id, parent_id, prev_id, next_id);

          //ui.item.children("div").children(".property_attribute_parent_id").val(parent_id);
          //ui.item.children("div").children(".property_attribute_prev_id").val(prev_id);
          //ui.item.children("div").children(".property_attribute_next_id").val(next_id);
        },
        start: function(event, ui) {
            $('#properties').sortable("destroy");
        },
        stop: function(event, ui) {
            init_properties_sortable();
        }
      });
    });

  </script>

  <style type="text/css">
    ol li {
      margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em;
      line-height: 27px;
      cursor: move;
    }
  </style>
<% end %>

<% unless product.property_group.blank?  %>
  <% if product.property_group.properties.blank? %>
    <p>Tento výrobek nemá přiřazeny žádné vlastnosti.</p>
  <% end %>
  <%= form_for [:admin, @product], :url => admin_product_product_properties_path(params[:id]), :validate => false do |f| %>

    <%= render "shared/error_messages", :target => @product %>
    
    <%= f.fields_for :property_group do |property_group| %>
      <ol id="properties">
        <%= property_group.fields_for :properties do |property| %>
          <%= render "properties", :property => property %>
        <% end %>
      </ol>

      <%= spinner "product_property" %>
      <%= link_to 'Přidat skupinu vlastností', new_property_admin_product_product_properties_path(params[:product_id]), :class => "new_button", :id => "product_property_button", :remote => true %>

        <script type="text/javascript">
          jQuery(function() {
            var toggleSpinner = function() {$("#product_property").toggle()};

            $("#product_property_button")
              .bind("ajax:beforeSend", toggleSpinner)
              .bind("ajax:complete", toggleSpinner);
          });
        </script>
    <% end %>

    <%= f.submit %>
  <% end %>

  <h2>Dostupné šablony vlastností</h2>

  <% @property_patterns.each do |property_pattern| %>
    <%= spinner "pattern" %>
  
    <table class="table">
      <thead>
        <tr>
          <th class="first">Šablona</th>
          <th class="last"></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th colspan="2"><%= button_to_new "Vytvořit šablonu vlastností", new_admin_property_pattern_path %></th>
        </tr>
      </tfoot>
      <tbody>
        <% unless @property_patterns.blank? %>
          <%= render :partial => "property_pattern", :collection => @property_patterns %>
        <% else %>
          <tr>
            <td colspan="10">Nejsou dostupné žádné šablony parametrů.</td>
          </tr>
        <% end %>
      </tbody>
    </table>

    <script type="text/javascript">
      jQuery(function() {
        var toggleSpinner = function() {$("#pattern").toggle()};

        $(".pattern_button").each(function(t) {
          t.bind("ajax:beforeSend", toggleSpinner)
           .bind("ajax:complete", toggleSpinner);
        });
      });
    </script>
  <% end %>
<% else %>
  <p>Tento výrobek nemá přiřazeny žádné skupiny vlastností.</p>
<% end %>